<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
</head>
<body>
  <script src="/js/sprite-timeline.js"></script>
  <button id="reverse">reverse</button>
  <button id="clear">clear</button>
  <button id="pause">pause</button>
  <button id="resume">resume</button>
  <div>currentTime: <span id="time"></span></div>
  <div>baseTime: <span id="basetime"></span></div>
  <script>
    const baseTimeline = new Timeline({playbackRate: 0.5})
    const timeline = new Timeline({playbackRate: 2}, baseTimeline)

    const timerID = timeline.setTimeout(() => {
      console.log('finished')
    }, {delay: -2000, heading: false})

    requestAnimationFrame(function f() {
      time.innerHTML = timeline.currentTime
      basetime.innerHTML = baseTimeline.currentTime
      requestAnimationFrame(f)
    })
    reverse.addEventListener('click', () => {
      baseTimeline.playbackRate = -baseTimeline.playbackRate
    })

    clear.addEventListener('click', () => {
      timeline.clearAlarm(timerID)
    })
    let playbackRate
    pause.addEventListener('click', () => {
      playbackRate = timeline.playbackRate
      timeline.playbackRate = 0
      const id = timeline.setTimeout(() => {
        console.log('resumed')
      }, {delay: 0, heading: true})
    })
    resume.addEventListener('click', () => {
      timeline.playbackRate = playbackRate
    })
  </script>
</body>
</html>